<template>
  <header>
    <div class="container">
      <nav class="header-wrap">
        <img src="../assets/logo.png" alt="logo">
        <ul>
          <li v-for="item in navList" 
            :key="item.enName"
            :class="{'active': active == item.enName}"
            @click="onClick(item.enName)"
          >
            {{item.name}}
          </li>
        </ul>
      </nav>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      active: 'Home',
      navList: [
        {name: '首页', enName: 'Home'},
        {name: '产品', enName: 'Product'},
        {name: '文章', enName: 'Article'},
        {name: '联系我们', enName: 'Contact'}
      ]
    }
  },
  methods: {
    onClick(enName) {
      
      // 跳转到字符串表示的路径
      if (enName == 'Home') {
        this.$router.push('/')
      }

      const path = '/' + enName.toLowerCase()
      // 跳转到指定命名的路由并带有查询参数
      if (enName == 'Product') {
        this.$router.push({
          name: enName,
          params: {
            id: 1
          }
        })
      }
      //跳转到指定路径并带有查询参数
      if (enName == 'Article') {
        this.$router.push({
          path: path, //path：/article
          query: {
            page: 1,
            tag: 0
          }
        })
      }
      // 跳转到指定路径
      if (enName == 'Contact') {
        this.$router.push({
          path: path  //path：/contact
        })
      }
      
      this.active = enName;
    }
  }
}
</script>

<style>
.header-wrap li.active {
  color: #000;
  border-bottom: 1px solid #888;
}

.router-link-exact-active.router-link-active {
  color: #000;
  border-bottom: 1px solid #888;
}
</style>